<template>
    <div class="malus-user-comment" :class="$route.name === 'Game' ? 'game' : ''"><h2>{{$t('user_comment_title')}}</h2><span class="malus-user-comment-des">{{$t('user_comment_desc')}}</span>
        <section class="malus-comment-wrapper container">
            <div class="row">
                <div class="col-md-4">
                    <div class="malus-comment-item"><img src="https://malus.s3cdn.net/uploads/c4.jpg">
                        <span>Cheryl Wan</span>
                        <p>
                            {{$t('user_comment_li_1')}}</p>
                        <ul class="buy-star">
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="malus-comment-item"><img
                        src="https://lh3.googleusercontent.com/a-/AOh14GhS4alxnfort6HiLoXFXqjklyPNd0NuUOxe6FMn=s100-c-k">
                        <span>Zaker Liu</span>
                        <p>{{$t('user_comment_li_2')}}</p>
                        <ul class="buy-star">
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="malus-comment-item"><img
                        src="https://lh3.googleusercontent.com/a-/AOh14GhPEzOtSTdQzjGchHILw8OBeKNGQQS_v1QgAlry=s100-c-k">
                        <span>gowithme</span>
                        <p>{{$t('user_comment_li_3')}}</p>
                        <ul class="buy-star">
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                            <li><i class="ri-star-fill"></i></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <a href="/r/chrome-reviews" class="malus-more-comment" target="_blank">{{$t('user_comment_more')}} <i
            class="ri-arrow-right-s-line"></i></a></div>
</template>

<script>
export default {
    name: "UserComment"
}
</script>

<style scoped lang="scss">
@media (max-width: 768px) {
    .malus-user-comment {
        margin-top: 6px!important;
        padding: 48px 0 40px!important;
        h2 {
            font-size: 32px !important;
        }

        .malus-comment-item {
            margin-bottom: 56px;
        }
    }
    .game {
        h2 {
            font-size: 28px!important;
        }
        h2:before {
            display: none!important;
            left: -60px!important;
            top: 18px!important;
            width: 35px!important;
            height: 10px!important;
        }
        h2:after {
            display: none!important;
            right: -60px!important;
            top: 18px!important;
            width: 35px!important;
            height: 10px!important;
        }
    }
}

.malus-user-comment {
    margin: 72px auto 0;
    background: #FBFBFF;
    padding: 72px 0 80px;

    .malus-user-comment-des {
        display: block;
        text-align: center;
        color: #666;
        padding: 0 24px;
        line-height: 1.5;
        max-width: 900px;
        margin: 16px auto 0;
        font-size: 12px;
    }

    .malus-comment-wrapper {
        max-width: 1140px;
        margin: 80px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.game {
    background: url(../assets/bg_3.f5590.png) no-repeat;
    background-size: cover;
    padding-top: 24px;
    text-align: center;
    .malus-comment-item {
        background: #181831!important;
        p {
            color: rgba(255,255,255,.5)!important;
        }
        span {
            color: rgba(255,255,255,.8)!important;
        }
    }
    h2 {
        color: #fff;
        display: inline-block;
        position: relative;
        padding: 0;
    }

    h2:before {
        width: 73px;
        height: 19px;
        background: url(../assets/title_left.e5ca6.svg) no-repeat;
        background-size: cover;
        left: -120px;
        top: 25px;
        display: block;
        position: absolute;
        content: "";
    }

    h2:after {
        width: 73px;
        height: 19px;
        background: url(../assets/title_right.880f5.svg) no-repeat;
        background-size: cover;
        right: -120px;
        top: 25px;
        display: block;
        position: absolute;
        content: "";
    }
}
</style>
